import 'package:dailyEn/detail.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
import 'package:dailyEn/global.dart';
import 'package:dailyEn/api.dart';
import 'dart:ui';

class KouYuListPage extends StatefulWidget {
  KouYuListPage({Key key}) : super(key: key);
  @override
  _KouYuListPageState createState() => _KouYuListPageState();
}

class _KouYuListPageState extends State<KouYuListPage> {
  List _list = [];
  int _page = 213;

  @override
  void initState() {
    getData();
    super.initState();
  }

  getData() async {
    setState(() => {_list = []});
    var res = await list(_page);
    setState(() => {_list = res['result']});
  }

  List<Widget> renderList(data) {
    List<Widget> list = [];
    for (var i = 0; i < data.length; i++) {
      var item = data[i];
      list.add(
        InkWell(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) =>
                    DetailPage(href: item['href'], date: item['date']),
              ),
            );
          },
          child: Container(
            width: MediaQuery.of(context).size.width,
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(10),
            decoration: BoxDecoration(
              color: Global.backgroundColor,
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.08),
                  offset: Offset(0, 0),
                  blurRadius: 10,
                  spreadRadius: 1,
                )
              ],
              borderRadius: BorderRadius.circular(7),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      item['title'][0],
                      style: TextStyle(
                        color: Global.fontSecondColor,
                        fontSize: 13,
                        fontWeight: FontWeight.w600,
                        fontFamily: 'SarasaMonoSCItalic',
                      ),
                    ),
                    Text(
                      item['date'],
                      style: TextStyle(
                        color: Global.fontSecondColor,
                        fontSize: 11,
                        fontWeight: FontWeight.w600,
                        fontFamily: 'SarasaMonoSCItalic',
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 15),
                Text(
                  item['title'][1],
                  style: TextStyle(
                    color: Global.fontColor,
                    fontSize: 17,
                    fontWeight: FontWeight.w400,
                    fontFamily: 'SarasaMonoSCItalic',
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    }

    list.add(
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Offstage(
            offstage: _page == 213,
            child: RaisedButton.icon(
              padding: EdgeInsets.fromLTRB(15, 5, 15, 5),
              color: Global.backgroundColor,
              elevation: 1,
              icon: Icon(
                Icons.arrow_back,
                color: Global.fontColor.withOpacity(.6),
                size: 24,
              ),
              label: Text(
                '上一页',
                style: TextStyle(
                  color: Global.fontColor.withOpacity(.6),
                  fontSize: 17,
                ),
              ),
              onPressed: () {
                setState(() {
                  _page++;
                  getData();
                });
              },
            ),
          ),
          RaisedButton.icon(
            padding: EdgeInsets.fromLTRB(15, 5, 15, 5),
            color: Global.backgroundColor,
            elevation: 1,
            icon: Icon(
              Icons.arrow_forward,
              color: Global.fontColor.withOpacity(.6),
              size: 24,
            ),
            label: Text(
              '下一页',
              style: TextStyle(
                color: Global.fontColor.withOpacity(.6),
                fontSize: 17,
              ),
            ),
            onPressed: () {
              setState(() {
                _page--;
                getData();
              });
            },
          ),
        ],
      ),
    );
    list.add(SizedBox(height: 20));
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return _list.length == 0
        ? Container(
            color: Global.backgroundColor,
            child: Center(
              child: CircularProgressIndicator(
                backgroundColor: Global.backgroundColor,
                valueColor: AlwaysStoppedAnimation<Color>(Global.fontColor),
              ),
            ),
          )
        : Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            decoration: BoxDecoration(
              color: Global.backgroundColor,
            ),
            margin: EdgeInsets.fromLTRB(15, 5, 15, 5),
            child: SingleChildScrollView(
              child: Column(
                children: renderList(_list),
              ),
            ),
          );
  }
}
